<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cros_csrf_shop</title>
    <script>

        /**
         * 获取手机数量
         */
        function getPhoneNum() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET','/shop/',true);
            xhr.onreadystatechange =function(e){
                if(this.readyState ==4&&this.status ==200){
                    const phoneNumText = document.getElementById("phoneNum");
                    phoneNumText.value = this.responseText;
                }
            }
            xhr.send();
        }

        /**
         * 购买手机
         */
        function buy() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST','/shop/',true);
            xhr.onreadystatechange =function(e){
                if(this.readyState ==4&&this.status ==200){
                    alert("执行结束");
                }
            }
            xhr.send();
        }

        /**
         * 退货
         */
        function giveBack() {
            const xhr = new XMLHttpRequest();
            // 这里要求携带认证信息
            xhr.withCredentials =true;
            xhr.open('DELETE','/shop/',true);
            xhr.onreadystatechange =function(e){
                if(this.readyState ==4&&this.status ==200){
                    alert("执行结束");
                }
            }
            xhr.send();
        }
    </script>
</head>
<body>
    <input type="text" id="phoneNum">
    <button onclick="getPhoneNum();">获取手机数量</button>
    <button onclick="buy();">购买手机</button>
    <button onclick="giveBack();">退还手机</button>
</body>
</html>